<template>
	<view class="container">
		<view class="top">
			<!-- <text @click="tabChange(0)" :class="[currentTab == 0 ? 'hb' : '']">智汇币充值</text>
			<text @click="tabChange(1)" :class="[currentTab == 1 ? 'hb' : '']">悬赏支付</text>
			<text @click="tabChange(2)" :class="[currentTab == 2 ? 'hb' : '']">律费/保险支付</text> -->
		</view>
		<view v-if="currentTab == 0" class="">
			<view class="middle">
				<view class="u-m-l-28 u-p-t-30 u-font-34 u-flex u-row-between" style="font-weight: bold;">
					<text>充值金额</text><text class='u-font-30 u-m-r-20 u-tips-color'>兑换规则：1元=100智汇币</text>
				</view>
				<view class="u-flex u-row-around u-m-l-30 u-m-r-30 u-m-t-30">
					<view @click="jine(item,index)" :class="[index == zhojian ? 'bianhuan' : 'wushi']"  v-for="(item,index) in moneyList" :key="index">
						{{form.money && item == '其他'?form.money:item}}
					</view>
				</view>
				<view class="u-m-l-28 u-p-t-60 u-font-34" style="font-weight: bold;">
					支付方式
				</view>
				<view class="u-p-l-40 u-m-t-30">
					<view @click="xuanzhong(index)" v-for="(item,index) in zfList" :key="index" :class="[index == zhongjianzhi ? 'zfbh' : 'zf']" class=" u-flex u-row-between u-p-20 u-p-l-30 u-m-t-20">
						<view class="u-flex u-row-center">
							<image style="width: 48rpx; height: 48rpx;" :src="item.imgUrl" mode=""></image>
							<text class="hz u-m-l-30 u-font-28">{{item.zflx}}</text>
						</view>
						<u-checkbox v-if="item.payTypeCode == 'wx'"  shape="circle" v-model="item.checked" active-color="#4B9BFF"></u-checkbox>
					</view>
				</view>
			</view>
			<view class="bottom u-flex u-p-l-40 u-p-r-40 u-row-between u-row-center">
				<view class="czje ">
					充值金额：
					<text class="je">￥{{je}}</text>
				</view>
				<view class="">
					<button class="button" @click="checkout">充值</button>
				</view>
			</view>
		</view>
		<view v-if="currentTab == 1" class="">
			<view class="xszfTop">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200"  label="悬赏项目" prop="xsxm">
						<u-input
							type="select"
							:select-open="selectShowXsxm"
							v-model="model.xsxm"
							placeholder="请选择"
							placeholderStyle="color: #0D1D36;"
							input-align="right"
							@click="selectShowXsxm = true"
						></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200"  :border-bottom="false" label="悬赏(智汇币)" prop="zhb">
						<u-input :border="border" placeholder="请输入数量  个" v-model="model.zhb" type="text" input-align="right"></u-input>
					</u-form-item>
				</u-form>
				</view>
				<view class="bottom u-flex u-p-l-40 u-p-r-40 u-row-between u-row-center">
					<view class="czje ">
						智汇币：
						<text class="je">5000</text>
					</view>
					<view class="">
						<button class="button">支付</button>
					</view>
				</view>
				<u-select mode="single-column" :list="selectList" v-model="selectShowXsxm" @confirm="selectConfirmXsxm"></u-select>
		</view>
		<view class="" v-if="currentTab == 2">
			<view class="bxzfMiddle">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200"  label="支付类别" prop="zflb">
						<u-input
							type="select"
							:select-open="selectShowZflb"
							v-model="model.zflb"
							placeholder="请选择"
							placeholderStyle="color: #0D1D36;"
							input-align="right"
							@click="selectShowZflb = true"
						></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200"  :border-bottom="true" label="支付金额" prop="zfje">
						<u-input :border="border" placeholder="请输入金额  万元" v-model="model.zfje" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200"  :border-bottom="true" label="支付次数" prop="zfcs">
						<u-input :border="border" placeholder="请输入次数  个" v-model="model.zfcs" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="  zwpj u-m-l-20  "   prop="bcsm">
						<u-input  type="textarea" :border="border" placeholder="请输入支付补充说明" v-model="model.bcsm" />
					</u-form-item>
				</u-form>
				<view class="u-m-l-28 u-p-t-50 u-font-34" style="font-weight: bold;">
					支付方式
				</view>
				<view class="u-p-l-40 u-m-t-30">
					<view @click="xuanzhong(index)" v-for="(item,index) in zfList" :key="index" :class="[index == zhongjianzhi ? 'zfbh' : 'zf']" class=" u-flex u-row-between u-p-20 u-p-l-30 u-m-t-20">
						<view class="u-flex u-row-center">
							<image style="width: 48rpx; height: 48rpx;" :src="item.imgUrl" mode=""></image>
							<text class="hz u-m-l-30 u-font-28">{{item.zflx}}</text>
						</view>
						<u-checkbox shape="circle" v-model="item.checked" active-color="#4B9BFF"></u-checkbox>
					</view>
				</view>
			</view>
			<view class="bxBottom u-flex u-p-l-40 u-p-r-40 u-row-between u-row-center">
				<view class="czje ">
					支付金额：
					<text class="je">￥5000</text>
				</view>
				<view class="">
					<button class="button">支付</button>
				</view>
			</view>
			<u-select mode="single-column" :list="selectList" v-model="selectShowZflb" @confirm="selectConfirmZflb"></u-select>
		</view>
		<u-popup v-model="showOther" mode="center" length="60%" :closeable="true"  height="180px" border-radius="14">
			<view class="u-m-30 u-p-t-60">
				<u-form :model="form" ref="uForm">
				<u-input v-model="form.money" placeholder="输入金额" type="number" :border="true" />
				<u-button type="primary" class="u-m-t-20 u-w-100" @click="payMoney">确定</u-button>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				form: {
					money: '',
				},
				rules: {
					money: [
						{ 
							required: true, 
							message: '请输入金额', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur'],
						}
					]
				},
				otherMoney:'',
				showOther:false,
				payBody:{},
				order:[],
				wxdata:[],
				pay_money:0.00,
				payShow:false,
				payTypeCode:'wx',
				currentTab: 0,
				moneyList:[50,100,200,500,'其他'],
				background: "#DDE1E5",
				color: "#273346",
				zhojian: 0,
				zhongjianzhi: 0,
				/**
				 * form验证
				 * */
				model: {
					zflb: '',
					zfje: '',
					zfcs: '',
					bcsm: '',
				},
				selectList: [
					{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				selectShowXsxm: false,
				selectShowZflb: false,
				je: 50,
				zfList:[
					{
						imgUrl:"../../static/img/wxxz.png",
						zflx: "微信支付",
						payTypeCode:'wx',
						checked: true,
					},
					{
						imgUrl:"../../static/img/zfbwxz.png",
						zflx: "支付宝支付",
						payTypeCode:'alipay',
						checked: false,
					},
					{
						imgUrl:"../../static/img/ylwxz.png",
						zflx: "银联支付",
						payTypeCode:'bank',
						checked: false,
					}
				],
			}
		},
		onLoad(options){
			
		},
		methods:{
			payMoney(){
                let money = +this.form.money
                
                if(money<0.01){
                    uni.showToast({
                        title:'最小金额为0.01',
                           icon:'none'
                    })
                    
                    return
                }
                
				this.je = this.form.money;
				this.showOther = false;
			},
			async checkout(){
				let wxdata = await this.$apis.wxPay({id:1,payMoney: this.je*100,payMoneyType:3,payType:0,type:0});
				this.pay(wxdata.data);
			},
			pay(wxdata) {
				let timestamp = wxdata.timestamp;
				let noncestr = wxdata.noncestr;
				let package1 = wxdata.package;
				let partnerid = wxdata.partnerid;
				let prepayid = wxdata.prepayid;
				let appid = wxdata.appid;
				let sign = wxdata.sign;
				var that = this;
				
				if(this.payTypeCode == 'zfb'){
					
					let orderInfo = wxdata;
					console.log(orderInfo);
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: orderInfo, //微信、支付宝订单数据
						success: function (res) {
							setTimeout(function() {
								uni.navigateTo({
									url:"../user/myaccount?tab=shui"
								})
							}, 2000);
						},
						fail: function (err) {	
							console.log(err);								
							uni.showModal({
								 content: "支付失败或已取消支付",  
								 showCancel: false  
							 })
						}
					});
					
				
				}else if(this.payTypeCode == 'wx'){
					let orderInfo = {  
							appid: appid,  
							noncestr: noncestr,  
							package: package1,  
							partnerid: partnerid,  
							prepayid: prepayid,  
							timestamp: timestamp,  
							sign: sign
						};				
						uni.requestPayment({
							provider: "wxpay", 
							orderInfo: orderInfo,
							success:function(res){
								uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 })
								setTimeout(function() {
									uni.navigateBack({
										delta:1
									})
								}, 2000);
							},
							 fail:function(res){  							
								uni.showModal({  
									 content: "支付失败或已取消支付",  
									 showCancel: false  
								 }) 
							}
						 })				
				}
					
			
			},
			tabChange(e) {
				this.currentTab = e;
			},
			xuanzhong(index){
				if(index==0){
				this.zhongjianzhi = index
					this.zfList[index].imgUrl = "../../static/img/wxxz.png"
					this.zfList[1].imgUrl = "../../static/img/zfbwxz.png"
					this.zfList[2].imgUrl = "../../static/img/ylwxz.png"
					this.zfList[1].checked = false
					this.zfList[2].checked = false
				}else if(index==1){
					uni.showToast({
						title:"即将上线！",
						icon:'none'
					})
					return;
				this.zhongjianzhi = index
					this.zfList[index].imgUrl = "../../static/img/zfbxz.png"
					this.zfList[0].imgUrl = "../../static/img/wxwxz.png"
					this.zfList[2].imgUrl = "../../static/img/ylwxz.png"
					this.zfList[0].checked = false
					this.zfList[2].checked = false
				}else{
					uni.showToast({
						title:"即将上线！",
						icon:'none'
					})
					return;
				this.zhongjianzhi = index
					this.zfList[index].imgUrl = "../../static/img/ylxz.png"
					this.zfList[0].imgUrl = "../../static/img/wxwxz.png"
					this.zfList[1].imgUrl = "../../static/img/zfbwxz.png"
					this.zfList[0].checked = false
					this.zfList[1].checked = false
				}
				this.payTypeCode = this.zfList[index].payTypeCode;
			},
			jine(item,index){
				if(index == 4){
					this.showOther = true;
				}else{
					this.je = item
				}
				this.zhojian = index
			},
			// 选择
			selectConfirmXsxm(e) {
				this.model.xsxm = '';
				e.map((val, index) => {
					this.model.xsxm += this.model.xsxm == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmZflb(e) {
				this.model.zflb = '';
				e.map((val, index) => {
					this.model.zflb += this.model.zflb == '' ? val.label : '-' + val.label;
				});
			},
		},
		
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f4f4f4;
	}
	.top{
		width: 750rpx;
		height: 150rpx;
		background: linear-gradient(0deg, #AB61FF, #DF61FF);
		display: flex;
		justify-content: space-around;
		padding: 58rpx 30rpx;
		
		text {
			display: block;
			width: 226rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
		}
		
		.hb {
			background: #AC49D3;
			border-radius: 30rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
	.middle{
		width: 710rpx;
		height: 697rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: -100rpx;
	}
	.wushi{
		width: 120rpx;
		height: 80rpx;
		background: #DDE1E5;
		border-radius: 6rpx;
		color: #273346;
		font-size: 34rpx;
		text-align: center;
		line-height: 80rpx;
	}
	.bianhuan{
		width: 120rpx;
		height: 80rpx;
		background: #AB61FF;
		border-radius: 6rpx;
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		line-height: 80rpx;
	}
	// .wushi:hover{
	// 	color: #FFFFFF;
	// 	background: #AB61FF;
	// }
	.bottom{
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		bottom: 0rpx;
	}
	.czje{
		color: #0D1D35;
		font-size: 30rpx;
		font-weight: bold;
		.je{
			font-size: 38rpx;
			color: #FD4F21;
		}
	}
	.button{
		width: 124rpx;
		height: 56rpx;
		background: #4B9BFF;
		border-radius: 28rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align:center;
		line-height: 56rpx;
	}
	.zf{
		width: 620rpx;
		height: 96rpx;
		border: 3rpx solid #DBD7DB;
		border-radius: 48rpx;
	}
	.zfbh{
		width: 620rpx;
		height: 96rpx;
		border: 3rpx solid #4B9BFF;
		border-radius: 48rpx;
		color: #4B9BFF;
	}
	// .zf:hover{
	// 	border: 3rpx solid #4B9BFF;
	// 	color: #4B9BFF;
	// }
	.xszfTop{
		width: 710rpx;
		height: 230rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: -100rpx;
	}
	.bxzfMiddle{
		width: 710rpx;
		height: 1120rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: -100rpx;
	}
	.zwpj{
		width: 670rpx;
		height: 225rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
	.bxBottom{
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		margin-top: 200rpx;
	}
</style>
